<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<title>的士平台便签服务</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/taxi.css" />
		<script src="js/adaption.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.min.js"></script>
	</head>

	<body>
		<ul class="note-lists">
			<li class="note-lists-box">
				<div class="note-scroll-wrapper clearfix">
					<div class="note-lists-wrap left">
						<div class="note-list-top clearfix">
							<p class="noted-time left">8月4日 12:30</p>
							<p class="thumbnail right"><img src="images/star.png" /></p>
						</div>
						<p class="note-words-short">示例：今日待办清单</p>
					</div>
					<div class="del-btn">删除</div>
				</div>
			</li>
		</ul>

		<script src="js/ydui.js"></script>
		<script>
			$(function() {
				var Nb_wid=$(".note-lists-box").width(),
					dt_wid=Math.ceil($(".del-btn").width()+0.5);
				console.log(dt_wid);
				// 设定每一行的宽度=屏幕宽度+按钮宽度
				$(".note-scroll-wrapper").width( Nb_wid + dt_wid);
				// 设定常规信息区域宽度=屏幕宽度
				$(".note-lists-wrap").width(Nb_wid);

				// 获取所有行，对每一行设置监听
				var lines = $(".note-lists-wrap");
				var len = lines.length;
				var lastX, lastXForMobile;

				// 用于记录被按下的对象
				var pressedObj; // 当前左滑的对象
				var lastLeftObj; // 上一个左滑的对象

				// 用于记录按下的点
				var start;

				// 网页在移动端运行时的监听
				for(var i = 0; i < len; ++i) {
					lines[i].addEventListener('touchstart', function(e) {
						lastXForMobile = e.changedTouches[0].pageX;
						pressedObj = this; // 记录被按下的对象 

						// 记录开始按下时的点
						var touches = event.touches[0];
						start = {
							x: touches.pageX, // 横坐标
							y: touches.pageY // 纵坐标
						};
					});

					lines[i].addEventListener('touchmove', function(e) {
						// 计算划动过程中x和y的变化量
						var touches = event.touches[0];
						delta = {
							x: touches.pageX - start.x,
							y: touches.pageY - start.y
						};

						// 横向位移大于纵向位移，阻止纵向滚动
						if(Math.abs(delta.x) > Math.abs(delta.y)) {
							event.preventDefault();
						}
					});

					lines[i].addEventListener('touchend', function(e) {
						if(lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
							$(lastLeftObj).animate({
								marginLeft: "0"
							}, 500); // 右滑
							lastLeftObj = null; // 清空上一个左滑的对象
						}
						var diffX = e.changedTouches[0].pageX - lastXForMobile;
						console.log(diffX);
						if(diffX < -40) {
							$(pressedObj).animate({
								marginLeft: "-1rem"
							}, 500); // 左滑
							lastLeftObj && lastLeftObj != pressedObj &&
								$(lastLeftObj).animate({
									marginLeft: "0"
								}, 500); // 已经左滑状态的按钮右滑
							lastLeftObj = pressedObj; // 记录上一个左滑的对象
						} else if(diffX > 40) {
							if(pressedObj == lastLeftObj) {
								$(pressedObj).animate({
									marginLeft: "0"
								}, 500); // 右滑
								lastLeftObj = null; // 清空上一个左滑的对象
							}
						}
					});
				}

				$(".line-btn-delete").click(function() {
					$(this).parent().parent(".line-wrapper").remove();
				});

			});
		</script>
	</body>

</html>